<template>
    <!-- 轮播图 -->
    <div class="banner-box">

        <!-- <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F021620115230%2F200216115230-9-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650548808&t=2b00689229c40e5759adfa78060e76b2" alt=""> -->

    
    <!-- <van-swipe :autoplay="3000">
    <van-swipe-item v-for="(item, index) in bannerList" :key="index">

        <img :src="item.image">
        <div class="info">
                <div class="topic"><h2>有哪些会话着重表达线条的力量？</h2></div>
                <div class="author"><span>作者 / Scotty</span></div>
        </div>
    </van-swipe-item>
    </van-swipe> -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.id" @click="viewDetails(item.id)">
            <img :src="item.image" alt="" srcset="">
            <div class="info">
            <div class="topic">{{item.title}}</div>
            <div class="author"><span>{{item.hint}}</span></div>
        </div>
        </van-swipe-item>
    </van-swipe>
    </div>
</template>

<script>
    export default {
    name:'Banner',

    data() {
        return {
            // 轮播图图片
            bannerList: [],
            
      };
    },

    components:{

    },

     created() {
      this.getBanner();
    },

    methods:{


        // 获取轮播图
        getBanner(){
            this.axios({

                
                // 请求类型
                method:'get',
                // 请求路径  最新日报
                 url: 'https://apis.netstart.cn/zhihudaily/stories/latest',

                

            }).then(result =>{
                
                this.bannerList = result.data.top_stories;
                
                
                
            }).catch(err =>{
                
            })
        },

        viewDetails(id){
           
            this.$router.push({name: 'Details', params: {id}});
        }


    },


    }
</script>

<style lang="less" scoped>
    .banner-box{
        
        height: 325px;
        
        position: relative;
        
    }

    img{
        width:100%;
        // height: 100%;
    }

    .info{
       
        position: absolute;
        bottom: 5%;
        left: 5%;
        color: white;
        
    }

    .topic{
        
        // height: 70px;
       width: 325px;
        font-size: 22px;
        text-overflow: ellipsis;
            display: -webkit-box; 
            -webkit-box-orient: vertical; 
            -webkit-line-clamp: 2; 
            overflow: hidden;
    }
    .author{
        margin-top: 10px;
        font-size: 14px;
    }

    .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 325px;
    
    background-color: #39a9ed;
    }

</style>